(function (window) {
	'use strict';
	var filters = {
		all: function (todos) {
			return todos;
		},
		active: function (todos) {
			return todos.filter(function (todo) {
				return !todo.completed;
			});
		},
		completed: function (todos) {
			return todos.filter(function (todo) {
				return todo.completed;
			});
		}
	};
	var vue = new Vue({
		el: "#app",
		data: {
			list: [
				{ id: 1, content: 'Taste JavaScript', completed: true },
				{ id: 2, content: 'Buy a unicorn', completed: false }
			],
			'nTodo': '',
			currentTodo: null,
			oValue: '',
			viewMode: 'all'
		},
		methods: {
			addTodo: function () {
				const todo = { id: this.nID, content: this.nTodo, completed: false };
				this.list.push(todo);
				this.nTodo = '';
			},
			removeTodo: function (todo) {
				var index = this.list.indexOf(todo);
				this.list.splice(index, 1);
			},
			editTodo: function (todo) {
				this.currentTodo = todo;
				this.oValue = todo.content;
			},
			modifyTodo: function (todo) {
				this.currentTodo = null;
			},
			revertTodo: function (todo) {
				this.currentTodo = null;
				todo.content = this.oValue;
			},
			clearTodo: function () {
				this.list = this.list.filter(ele => !ele.completed);
			},
			changeView(mode) {
				this.viewMode = mode;
			}

		},
		computed: {
			nID: function () {
				return Math.max(...this.list.map(item => item.id)) + 1;
			},
			lefts: function () {
				return this.list.filter(ele => !ele.completed).length;
			},
			completes: function () {
				return this.list.filter(ele => ele.completed).length > 0;
			},
			allDone: {
				get: function () {
					return this.lefts === 0;
				},
				set: function (value) {
					this.list.forEach(element => {
						element.completed = value;
					});
				}

			},
			viewTodo: function () {
				return filters[this.viewMode](this.list);
			}
		},
		directives: {
			focus: {
				update(el, binding) {
					if (binding.value) {
						el.focus();
					}
				}
			}
		}
	})

})(window);
